<template>
  <div class="main">
    <div class="m-left">
      <div class="logo">
        <a href="">
          <div class="left">
            <img src="~@/assets/img/imgl2.png" alt="" />
          </div>
          <div class="right">
            <div class="tit">青少年健康管理</div>
          </div>
        </a>
      </div>
      <div class="nav">
        <ul>
          <li class="on">
            <a href="javascript:void(0)" class="v1"><i class="i2"></i>体育云作业</a>
          </li>
          <li>
            <a href="javascript:void(0)" class="v1"><i class="i3"></i>体育锻炼</a>
          </li>
          <li>
            <a href="javascript:void(0)" class="v1"><i class="i4"></i>体育测试</a>
          </li>
        </ul>
      </div>
      <div class="m-information">
        <a @click="logoutHandle" class="close"></a>
        <a @click="updatePasswordHandle" class="more"></a>
        <div class="information">
          <div class="box">
            <div class="pic">
              <img src="~@/assets/img/imgl7.png" alt="" />
            </div>
          </div>
          <div class="txt">
            <h3 class="tit">{{this.userName}}</h3>
            <div class="info">{{this.userDeptName}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="m-contant">
      <div class="left">
        <div class="m-chart1" style="margin-bottom:10px;">
          <el-form :inline="true" @keyup.enter.native="getDataList(true)">
            <el-form-item>
              <el-input clearable v-model="queryParams.queryModel.testerName" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <commonSelect :typeCode="'GRADE_NAME'" v-model="queryParams.queryModel.grade" :placeholder="'年级'"></commonSelect>
            </el-form-item>
            <el-form-item>
              <commonSelect :typeCode="'CLASS_NAME'" v-model="queryParams.queryModel.clazz" :placeholder="'班级'"></commonSelect>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="queryParams.queryModel.displayTime"
                type="daterange"
                align="left"
                style="width:380px"
                unlink-panels
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dateChange"
                :picker-options="createTimePickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button @click="getDataList(true)" type="primary" icon="el-icon-search">查询</el-button>
              <el-button @click="resetParams" type="warning" icon="el-icon-delete">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="m-healthl">
          <el-table
            highlight-current-row
            border
            :header-cell-style="{background:'#E3F9F3',color:'#000',fontWeight:'bold',fontSize:'14px'}"
            :height="documentClientHeight - 210"
            :data="pageData.list"
            :default-sort = "{prop: 'updateTime', order: 'ascending'}"
            v-loading="dataListLoading"
            ref="table"
            style="width: 100%;">
            <el-table-column
              prop="testerName"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="100"
              label="姓名">
            </el-table-column>
            <el-table-column
              prop="avatar"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="90"
              label="头像">
              <template slot-scope="scope"><el-avatar :size="80" :src="scope.row.avatar"></el-avatar></template>
            </el-table-column>
            <el-table-column
              prop="gender"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="90"
              label="性别">
            </el-table-column>
            <el-table-column
              prop="school"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="150"
              label="学校">
            </el-table-column>
            <el-table-column
              prop="grade"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="90"
              label="班级">
              <template slot-scope="scope">{{ scope.row.gradeName }}{{ scope.row.className }}</template>
            </el-table-column>
            <el-table-column
              prop="itemCode"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="100"
              label="项目">
              <template slot-scope="scope">{{ scope.row.itemName }}</template>
            </el-table-column>
            <el-table-column
              prop="score"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="100"
              label="成绩">
              <template slot-scope="scope">{{ scope.row.score | formatMoney }}{{scope.row.unit}}</template>
            </el-table-column>
            <el-table-column
              prop="startTime"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="150"
              label="运动开始时间">
            </el-table-column>
            <el-table-column
              prop="endTime"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              min-width="150"
              label="运动结束时间">
            </el-table-column>
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              min-width="90"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" style="padding:0;" v-if="isAuth('sport:sportapi:update')" @click="updateHandle(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="queryParams.pageNo"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="queryParams.pageSize"
            :total="pageData.totalCount"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
  </div>
</template>

<script>
import commonSelect from '@/components/common-select'
import echarts from 'echarts'
import $ from 'jquery'
import UpdatePassword from '@/views/main-navbar-update-password'
import { clearLoginInfo, initQueryParams } from '@/utils'
import { dateSelectShorts, formatMoney } from '@/utils/common'
export default {
  data() {
    return {
      dialog: {
        isVisible: false,
        type: 'add'
      },
      queryParams: initQueryParams(),
      pageData: {
        totalCount: 0,
        list: [],
        extData: {}
      },
      dataListLoading: false,
      btnLoading: false,
      pageLoading: false,
      updatePassowrdVisible: false,
      createTimePickerOptions: {
        shortcuts: dateSelectShorts()
      }
    }
  },
  components: {
    UpdatePassword, commonSelect
  },
  created() {
  },
  mounted () {
    this.getUserInfo()
    this.resetDocumentClientHeight()
    this.resetDocumentClientWidth()
    window.addEventListener('scroll', this.onScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.onScroll)
  },
  computed: {
    documentClientHeight: {
      get () { return this.$store.state.common.documentClientHeight },
      set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
    },
    documentClientWidth: {
      get () { return this.$store.state.common.documentClientWidth },
      set (val) { this.$store.commit('common/updateDocumentClientWidth', val) }
    },
    userId: {
      get() { return this.$store.state.user.id },
      set(val) { this.$store.commit('user/updateId', val) }
    },
    userName: {
      get() { return this.$store.state.user.name },
      set(val) { this.$store.commit('user/updateName', val) }
    },
    userTel: {
      get() { return this.$store.state.user.tel },
      set(val) { this.$store.commit('user/updateTel', val) }
    },
    userMobile: {
      get() { return this.$store.state.user.mobile },
      set(val) { this.$store.commit('user/updateMobile', val) }
    },
    userDeptId: {
      get() { return this.$store.state.user.deptId },
      set(val) { this.$store.commit('user/updateDeptId', val) }
    },
    userDeptName: {
      get() { return this.$store.state.user.deptName },
      set(val) { this.$store.commit('user/updateDeptName', val) }
    },
    userType: {
      get() { return this.$store.state.user.userType },
      set(val) { this.$store.commit('user/updateUserType', val) }
    }
  },
  destroyed() {
  },
  activated() {

  },
  updated () {
    this.$nextTick(() => {
      this.$refs['table'].doLayout()
    })
  },
  methods: {
    resetParams() {
      this.queryParams = initQueryParams()
      this.getDataList(true)
    },
    // 获取数据列表
    getDataList (isReload) {
      if (isReload) {
        this.queryParams.pageNo = 1
      }
      this.dataListLoading = true
      this.$http({
        url: this.$http.requestUrl('/sport/sportapi/list'),
        method: 'get',
        params: this.$http.requestParams(this.queryParams)
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.pageData = data.page
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.queryParams.pageSize = val
      this.queryParams.pageNo = 1
      this.getDataList(false)
    },
    // 当前页
    currentChangeHandle (val) {
      this.queryParams.pageNo = val
      this.getDataList(false)
    },
    // 排序
    sortChange: function (column) {
      if (column.order === 'descending') {
        this.queryParams.sort = column.prop + ' desc'
      } else if (column.order === 'ascending') {
        this.queryParams.sort = column.prop + ' asc'
      }
      this.getDataList(true)
    },
    onScroll() {
      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    },
    // 重置窗口可视高度
    resetDocumentClientHeight () {
      this.documentClientHeight = document.documentElement['clientHeight']
      window.onresize = () => {
        this.documentClientHeight = document.documentElement['clientHeight']
      }
    },
    // 重置窗口可视宽度
    resetDocumentClientWidth () {
      this.documentClientWidth = document.documentElement['clientWidth']
      window.onresize = () => {
        this.documentClientWidth = document.documentElement['clientWidth']
      }
    },
    // 获取当前用户
    getUserInfo() {
      this.$http({
        url: this.$http.requestUrl('/sys/user/info'),
        method: 'get',
        params: this.$http.requestParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.userId = data.user.userId
          this.userName = data.user.userName
          this.userTel = data.user.tel
          this.userMobile = data.user.mobile
          this.userDeptId = data.user.deptId
          this.userDeptName = data.user.deptName
          this.userType = data.user.userType
          this.getDataList(true)
        }
      })
    },
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init()
      })
    },
    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.requestUrl('/sys/logout'),
          method: 'post',
          data: this.$http.requestData()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            clearLoginInfo()
            this.$router.push({ name: 'login' })
          }
        })
      }).catch(() => { })
    }
  }
}
</script>
<style src="@/assets/scss/stu.scss" lang="scss" scoped></style>
